<template>
  <Container>
    <TableHeaderSearch slot="header" :search-option="searchOption" :value="searchCondition" @onSearch="onSearch" @onExport="onExport" />
    <Tabs>
      <TabPane label="门店优惠券使用情况汇总列表">
        <Table stripe :height="options.tableHeight" :columns="list.columns" :data="list.data" no-data-text="亲，没有找到相关记录哦！~" />
        <div class="pager">
          <Page
            :total="list.total"
            :current="list.current"
            :page-size="list.pageSize"
            show-sizer
            placement="top"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
          />
        </div>
        <Loader :status="list.status" @refresh="getData" />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import { formatMonth } from '@/util'
import table from '@/table'
import listData from './summary/CouponStoreSummaryData'
import TableHeaderSearch from './components/TableHeaderSearch'
export default {
  components: {
    TableHeaderSearch
  },
  data () {
    return {
      storeName: '',
      list: listData,
      options: {
        tableHeight: 300
      },
      searchOption: {
        showExport: true,
        showMonth: {
          value: true,
          placeholder: '月份'
        }
      },
      searchCondition: {}
    }
  },
  watch: {
    $route (newVal) {
      let page = ~~this.$route.query.current
      if (this.list.current !== page) {
        this.list.current = ~~this.$route.query.current === 0 ? 1 : ~~this.$route.query.current
        this.getData()
      }
    }
  },
  mounted () {
    this.list.current = ~~this.$route.query.current || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    // this.getData()
    this.$bus.$on('onClickDetail', (item) => {
      this.$router.push({ name: 'sales/summary/list', query: { id: item.storeId, month: item.useMonth } })
    })
  },
  methods: {
    ...table,
    getData () {
      const param = {
        current: this.list.current,
        size: this.list.pageSize
      }
      Object.keys(this.searchCondition).forEach(key => {
        if (key === 'useMonth') {
          param.useMonth = formatMonth(this.searchCondition.useMonth).replace('-', '')
        } else {
          param[key] = this.searchCondition[key]
        }
      })
      this.list.status = 'loading'
      this.$ajaxGet('/coupon/coupon_receive/summary', param).then(res => {
        this.list.data = res.records || []
        this.list.total = Number(res.total)
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onSearch (data) {
      this.searchCondition = data
      this.list.current = 1
      this.getData()
    },
    onExport (data) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定导出列表?',
        onOk: () => {
          this.searchCondition = data
          const param = {
            current: this.list.currentPage,
            size: this.list.pageSize
          }
          Object.keys(this.searchCondition).forEach(key => {
            if (key === 'useMonth') {
              param.useMonth = formatMonth(this.searchCondition.useMonth).replace('-', '')
            } else {
              param[key] = this.searchCondition[key]
            }
          })
          this.$ajaxPost('/coupon/coupon_receive/used_summary_export', param).then(res => {
            if (res === 'NONE_QUERY_CONDITION') {
              this.$Message.warning({
                background: true,
                content: '请输入具体的查询条件'
              })
            } else {
              this.$router.push('/home/export/list')
            }
          })
        }
      })
    },
    onPageChange (val) {
      this.list.current = val
      this.$router.replace({
        name: 'sales/coupon/summary',
        query: {
          current: this.list.current,
          size: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange (size) {
      this.list.current = 1
      this.list.pageSize = size
      this.$router.replace({
        name: 'sales/coupon/summary',
        query: {
          current: this.list.current,
          size: this.list.pageSize
        }
      })
      this.getData()
    }
  }
}
</script>
